<template>
	<view class="auth">
		<view class="info">
			<view class="line">
				<view class="l">手机号：</view>
				<input type="text" class="r" placeholder="请输入手机号" v-model="mobile" />
			</view>
			<view class="line">
				<view class="l">验证码：</view>
				<input type="text" class="r" v-model="captcha" placeholder="请输入验证码" />
				<view class="code" @click="getCode">{{word}}</view>
			</view>
		<!-- 	<view class="line">
				<view class="l">邀请码：</view>
				<input type="text" class="r" v-model="code" placeholder="请输入邀请码" />
			</view> -->
		</view>
		<view class="btn" @click="bind">绑定</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				word: '获取验证码',
				num: '',
				finish: true,
				mobile: '',
				code: '',
				captcha: '',
				platform: '',
				third_id: ''
			};
		},
		onLoad(option) {
			this.platform = option.platform
			if(uni.getStorageSync('invitecode')) {
				this.code = uni.getStorageSync('invitecode')
			}
		},
		methods: {
			getCode() {
				if (this.finish) {
					if (!(/^1[3456789]\d{9}$/.test(this.mobile))) {
						uni.$u.toast('请输入正确的手机号');
						return;
					}
					this.finish = false
					this.num = 60
					this.word = `${this.num}秒后重新发送`
					this.change()
					uni.$u.http.post('/send', {
						event: 'bind',
						mobile: this.mobile,
					}).then(res => {
						if (res.code == 1) {
							uni.$u.toast('已发送');
						}
					}).catch((res) => {

					})

				} else {
					uni.$u.toast('请稍后重试');
				}

			},
			change() {
				setTimeout(() => {
					this.num--;
					if (this.num === 0) {
						this.finish = true
						this.word = '获取验证码'
					} else {
						this.word = `${this.num}秒后重新发送`
						this.change()
					}
				}, 1000)
			},
			bind() {
				uni.$u.http.post('/bind', {
					mobile: this.mobile,
					captcha: this.captcha,
					code: this.code
				}).then(res => {
					console.log(res,'bindbindbind')
					if (res.code == 1) {
						uni.$u.toast(res.msg)
						setTimeout(() => {
							uni.$emit('bindmobile',{
								mobile: this.mobile
							})
							uni.$u.route({
								type: 'back'
							})
						}, 1000)
					}
				}).catch((res) => {
					console.log(res,'bindbindbind22222')
				})
			}
		}
	}
</script>
<!-- <style>
	page {
		height: 100vh;
		background: #F6F6F6;
	}
</style> -->
<style lang="scss" scoped>
	

	.auth {
		height: 100vh;
		box-sizing: border-box;
		background: #F6F6F6 linear-gradient(to bottom, #FFC141, #F6F6F6);
		background-size: 750rpx 500rpx;
		background-repeat: no-repeat;
		padding-top: 50rpx;

		.btn {
			background: linear-gradient(to right, #FFDF41, #FFC141);
			height: 88rpx;
			border: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 50rpx auto 0;
			width: 590rpx;
			border-radius: 44rpx;
		}

		.info {
			background: #FFFFFF;
			margin: 0 20rpx;
			border-radius: 20rpx;
			padding: 0 20rpx 20rpx;

			.line {
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #F6F6F6;

				.l {
					color: #575859;
					font-size: 32rpx;
				}

				.r {
					flex: 1;
				}

				.code {
					font-size: 28rpx;
				}
			}

			.line:last-of-type {
				border-bottom: none;
			}

			.box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				height: 230rpx;
				width: 510rpx;
				margin: 20rpx auto;
				border: 1px solid #FFCE54;
				border-radius: 20rpx;

				.icon {
					width: 51rpx;
					height: 49rpx;
				}

				.word {
					color: #FF8007;
					font-size: 30rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>
